<template>
	<view class="page index">
		<view class="notice-item">
			<navigator class="content" url="/pages/index/notice/public/index" hover-class="none">
				<view class="left">
					<span class="iconfont icon">&#xe613;</span>
				</view>
				<view class="center">
					<view class="title">
						公告通知
					</view>
					<view class="explain">
						暂无新的公告通知
					</view>
				</view>
				<view class="right">
					<uni-icons type="right" size="20" color="#9a9a9a"></uni-icons>
				</view>
			</navigator>
		</view>
		<view class="notice-item">
			<navigator class="content" url="/pages/index/notice/message/index" hover-class="none">
				<view class="left" style="background-color: #a9ddde;">
					<span class="iconfont icon">&#xe674;</span>
				</view>
				<view class="center">
					<view class="title">
						消息提醒
					</view>
					<view class="explain">
						有<span>23</span>条消息提醒待查看
					</view>
				</view>
				<view class="right">
					<uni-icons type="right" size="20" color="#9a9a9a"></uni-icons>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 24rpx 28rpx;
		.notice-item{
			@include box;
			padding: 60rpx 28rpx;
			margin: 0 0 24rpx;
			.content{
				@include flex-r-between-center;
				.left{
					flex: 0 0 auto;
					width: 110rpx;
					height: 110rpx;
					@include box;
					background-color: #fde47f;
					@include flex-r-center-center;
					.icon{
						color: #fff;
						font-size: 80rpx;
					}
				}
				.center{
					flex: 1 0 0;
					@include flex-c-between-start;
					padding-left: 60rpx;
					.title{
						color: #000;
						font-size: 28rpx;
						font-weight: bold;
					}
					.explain{
						color: #9A9A9A;
						font-size: 24rpx;
						span{
							color: #bf3124;
						}
					}
				}
			}
		}
	}
</style>